<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="1200px"
    @close="close"
  >
    <vab-query-form>
      <vab-query-form-left-panel :span="21">
        <div style="font-size: 20px">
          {{ form.CustomerAllName }}
        </div>
      </vab-query-form-left-panel>
      <vab-query-form-left-panel :span="3">
        <el-button type="primary" @click="applyPick(form)">
          新建业务商机
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        label="商机ID"
        prop="OrderID"
        width="100"
      />
      <el-table-column
        align="center"
        label="推荐商机"
        prop="BusinessOrderName"
      />
      <el-table-column align="center" label="商机状态">
        <template #default="{ row }">
          <span v-if="row.OrderState == 0 && row.SaleStaffID == 0"></span>
          <span v-if="row.OrderState == 0 && row.SaleStaffID !== 0">
            跟进中
          </span>
          <span v-if="row.OrderState > 0">已签约</span>
          <span v-if="row.OrderState == -100">已放弃</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="挑入跟进人">
        <template #default="{ row }">
          <span v-if="row.SaleStaffID == 0"></span>
          <span v-else>***</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="申请挑入">
        <template #default="{ row }">
          <el-button
            v-if="
              row.isMainPick == 0 ||
              (row.isMainPick == 2 && row.OrderState == -100)
            "
            size="small"
            type="primary"
            @click="toBusiness(row)"
          >
            挑入商机
          </el-button>
          <el-button
            v-if="row.isMainPick == 1"
            size="small"
            type="success"
            @click="toBusiness(row)"
          >
            已挑入,去跟进
          </el-button>
          <el-button
            v-if="row.isMainPick == 2 && row.OrderState == 0"
            size="small"
            type="warning"
            @click="toBusiness(row)"
          >
            申请挑入
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import {
    ApplyCustomerPick,
    ApplyBusinessOrder,
  } from '@/api/customerSearchpick'
  import { CustomerBusiness } from '@/api/common'
  export default defineComponent({
    name: 'Business',
    emits: ['fetch-data'],
    setup() {
      const router = useRouter()
      const state = reactive({
        formRef: null,
        list: [],
        listLoading: true,
        form: {
          roles: [],
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogFormVisible: false,
      })

      const showAllocation = (row) => {
        state.listLoading = true
        if (!row) {
          state.title = '客户推荐商机'
        } else {
          state.title = '客户推荐商机'
          state.form = Object.assign({}, row)
          getList()
        }

        state.dialogFormVisible = true
      }
      const close = () => {
        state.form = {
          roles: [],
        }
        state.dialogFormVisible = false
      }
      const getList = async () => {
        console.log(state.form, 'state.formstate.form')
        const dataMsg = {
          CustomerID: state.form.CustomerID,
        }
        const {
          data: { list },
        } = await CustomerBusiness(dataMsg)
        state.list = list
        state.listLoading = false
      }

      const applyPick = async (row) => {
        console.log(row, '123123')
        const data = {
          CustomerID: row.CustomerID,
        }
        const {
          data: { CustomerPickID },
        } = await ApplyCustomerPick(data)
        router.push({
          path: '/customer/track/trackingBusiness',
          query: { CustomerPickID: CustomerPickID },
        })
      }

      const toBusiness = async (item) => {
        console.log(item, '123123123')
        //没人挑入
        if (item.isMainPick == 0) {
          const dataMsg = {
            OrderID: item.OrderID,
          }
          const { data } = await ApplyBusinessOrder(dataMsg)
          router.push({
            path: '/customer/track/trackingBusiness',
            query: { CustomerPickID: data.CustomerPickID },
          })
        }
        // 自己挑入过的
        if (item.isMainPick == 1) {
          console.log('走这里了吗？')
          router.push({
            path: '/customer/track/trackingBusiness',
            query: { CustomerPickID: item.CustomerPickID },
          })
        }

        if (item.isMainPick == 2) {
          ElMessage({
            message: '暂无开发。挑入别人的',
            type: 'warning',
          })
          console.log('有人挑入了 申请挑入')
        }
      }

      return {
        ...toRefs(state),
        showAllocation,
        toBusiness,
        applyPick,
        getList,
        close,
      }
    },
  })
</script>
<style scoped>
  :deep(.left-panel) {
    justify-content: space-between !important;
  }
</style>
